import React from 'react';
// 自己封装的地区组件
import AreaPicker from '@/components/common/area/areapicker';
const Profile = () => {
    const [form] = React.UI.Form.useForm()
    const [avatar, SetAvatar] = React.useState([{
        url: React.Business.avatar_text
    }])
    //初始化的个人资料数据
    const [business] = React.useState({
        nickname: React.Business.nickname,
        mobile: React.Business.mobile,
        email: React.Business.email ?? '',
        gender: React.Business.gender,
        region_text: React.Business.region_text,
        district: React.Business.district,
        province: React.Business.province,
        city: React.Business.city,
    })


    //地区显示
    const [areashow, SetAreashow] = React.useState(false)

    //头像上传
    const UploadAvatar = (file: any) => {
        //覆盖
        React.Business.avatar = file

        return {
            url: URL.createObjectURL(file)
        }
    }

    //地区确认方法
    const AreaConfirm = (values: any, val: any) => {
        
        SetAreashow(false)

        let region_text = '';
        if(val[0]) region_text = `${val[0]} -`
        if(val[1]) region_text += `${val[1]} -`
        if(val[2]) region_text += `${val[2]}`

        if(values[0]) var province = values[0]
        if(values[1]) var city = values[1]
        if(values[2]) var district = values[2]

        //修改数据 对表单中的input元素的值进行数据的修改
        form.setFieldsValue({
            region_text: region_text,
            district: district,
            city: city,
            province: province,
        })
    }

    const OnSubmitEvent = async(values: any) => 
    {
        // 组装数据
        values.id = React.Business.id

        //判断是否有输入密码，如果没有就删除
        if(!values.password) delete values.password

        //判断是否有上传图片
        if(React.Business.avatar) values.avatar = React.Business.avatar

        //获取到选择的地区码
        if(form.getFieldValue('region_text'))
        {
            values.province = form.getFieldValue('province')
            values.city = form.getFieldValue('city')
            values.district = form.getFieldValue('district')
        }

        let result = await React.HTTP.upload('/business/profile', values)
        if (result.code == 1) 
        {
            //覆盖cookie的信息
            React.Cookie.save('Business', result.data)
            
            //修改一下全局的Business用户数据
            React.Business = result.data
            React.SetBusiness(result.data)

            React.success(result.msg, () => React.navigate('/business/index'))
        }
        else 
        {
            React.error(result.msg)
        }
    }

    return (
        <>
            {/* 地区组件 */}
            <AreaPicker visible={areashow} onClose={() => SetAreashow(false)} onConfirm={AreaConfirm} />

            {/* 表单结构 */}
            <React.UI.Form
                form={form}
                layout='horizontal'
                initialValues={business}
                onFinish={OnSubmitEvent}
                footer={
                    <React.UI.Button block type='submit' color='primary' size='large'>
                        提交修改
                    </React.UI.Button>
                }
            >
                {/*头像 */}
                <React.UI.Form.Item>
                    <React.UI.AutoCenter>
                        <React.UI.ImageUploader
                            value={avatar}
                            onChange={SetAvatar}
                            upload={UploadAvatar}
                            maxCount={1}
                        />
                    </React.UI.AutoCenter>
                </React.UI.Form.Item>

                {/* 昵称 */}
                <React.UI.Form.Item name='nickname' label='昵称' rules={[{ required: true, message: '昵称不能为空' }]}>
                    <React.UI.Input placeholder='请输入昵称' />
                </React.UI.Form.Item>

                {/* 手机号码 */}
                <React.UI.Form.Item name='mobile' label='手机号码' rules={[{ required: true, message: '请填写手机号码' }, { pattern: /^1[3456789]\d{9}$/, message: '手机号格式不对' }]}>
                    <React.UI.Input placeholder='请输入手机号码' />
                </React.UI.Form.Item>

                {/* 密码 */}
                <React.UI.Form.Item name='password' label='密码'>
                    <React.UI.Input placeholder='请输入密码' type="password" />
                </React.UI.Form.Item>

                {/* 邮箱 */}
                <React.UI.Form.Item name='email' label='邮箱' rules={[{ required: true, message: '请填写邮箱' },{ type: 'email', warningOnly: true }]}>
                    <React.UI.Input placeholder='请输入邮箱' />
                </React.UI.Form.Item>

                {/* 性别 */}
                <React.UI.Form.Item name='gender' label='性别' rules={[{ required: true, message: '性别不能为空' }]}>
                    <React.UI.Radio.Group>
                        <React.UI.Space direction='horizontal'>
                            <React.UI.Radio value='0'>保密</React.UI.Radio>
                            <React.UI.Radio value='1'>男</React.UI.Radio>
                            <React.UI.Radio value='2'>女</React.UI.Radio>
                        </React.UI.Space>
                    </React.UI.Radio.Group>
                </React.UI.Form.Item>

                {/* 地区 */}
                <React.UI.Form.Item name='region_text' label='地区' onClick={() => SetAreashow(true)}>
                    <React.UI.Input placeholder="请选择地区" readOnly />
                </React.UI.Form.Item>
            </React.UI.Form>
        </>
    )
}
export default Profile